/**
 * pie组件 ：封装的饼图组件
 * 
 */
 import React, { Component } from 'react';
 import * as echarts from 'echarts';

 class Pie extends Component {
 
     render() {
         var chartDom = document.getElementById(this.props.id);
         if (chartDom) {
             var myChart = echarts.init(chartDom);
             var option
 
             option = {
                 title: {
                     text: this.props.title,
         
                     left: 'center'
                 },
                 tooltip: {
                     trigger: 'item',
                     formatter:'{a}<br/>{b}:{c}({d}%)'
                 },
                
                 series: [
                     {
                         name: this.props.name,
                         type: 'pie',
                         radius: '50%',
                         data: this.props.data, 
                         emphasis: {
                             itemStyle: {
                                 shadowBlur: 10,
                                 shadowOffsetX: 0,
                                 shadowColor: 'rgba(169, 116, 116, 0.5)'
                             }
                         }
                     }
                 ]
             }
             if(this.props.legend){
                 option.legend={
                         orient: 'vertical',
                         left:'left'
                 }    
             }
 
             option && myChart.setOption(option);
         }
 
 
         return (
             <div 
             
             id={this.props.id} 
             style={{ width: '100%',
              height: '340px',
             
              border: '1px  dashed #ccc' } 
              }>
 
             </div>
         );
     }
 }
 
 export default Pie;
 
 